/* eslint-disable @typescript-eslint/no-var-requires */
import React, { useRef } from 'react';
import styles from './index.module.less';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
import OptionsNav from '@/components/options-nav';
const CREATE_IMG = require('@/assets/images/add.png');

const FooterNav: React.FC<any> = (props) => {
  const navRef: React.MutableRefObject<any> = useRef();

  const setActiveName = (path: string): string => {
    return props.match?.path === path ? styles['active'] : '';
  };

  const handleNavShow = () => {
    navRef.current.toggleVisible();
  };

  return (
    <React.Fragment>
      <div className={styles['nav']}>
        <Link className={classnames(styles['nav-item'], setActiveName('/home'))} to="/home">
          <i className={classnames('iconfont', 'icontab_icon_home_off', styles['icon'])}></i>
          <span className={styles['icon-text']}>首页</span>
        </Link>
        <div className={classnames(styles['nav-item'])} onClick={handleNavShow}>
          <img className={styles['create']} src={CREATE_IMG} />
        </div>
        <Link className={classnames(styles['nav-item'], setActiveName('/personal-center'))} to="/personal-center">
          <i className={classnames('iconfont', 'icontab_icon_home_off2', styles['icon'])}></i>
          <span className={styles['icon-text']}>我的</span>
        </Link>
      </div>
      <OptionsNav ref={navRef} />
    </React.Fragment>
  );
};

export default FooterNav;